<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>批量传递props</title>
		<!-- 引入react核心库 -->
		<script type="text/javascript" src="../js/react.development.js"></script>
		<!-- 引入react-dom，用于支持react操作DOM -->
		<script type="text/javascript" src="../js/react-dom.development.js"></script>
		<!-- 引入babel，用于解析jsx为js -->
		<script type="text/javascript" src="../js/babel.min.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器 -->
		<div id="test"></div>

		<script type="text/babel">
			//定义Person组件
			class Person extends React.Component{
				render(){
					console.log(this)
					const {name,age,sex,address,car} = this.props
					// this.props.name = this.props.name + '!' //改行代码会引起报错，因为props是只读的
					return (
						<ul>
							<li>姓名：{name}</li>	
							<li>性别：{sex}</li>	
							<li>年龄：{age}</li>	
							<li>住址：{address}</li>	
							<li>座驾：{car}</li>	
						</ul>
					)
				}
			}

			let p1 = {
				name:'老牛',
				age:18,
				sex:'女',
				address:'北七家镇·宏福科技园',
				car:'奔驰c63'
			}

			// console.log('#',...p1) //该行不会报错，但也未能展开一个对象

			//渲染组件
			// ReactDOM.render(<Person name={p1.name} age={p1.age} sex={p1.sex} address={p1.address} car={p1.car}/>,document.getElementById('test'))
			
			//批量传递props
			//正常情况下...obj是会报错的，但是react+babel就可以完成...obj，且仅仅适用于标签属性的传递
			ReactDOM.render(<Person {...p1}/>,document.getElementById('test'))
		</script>
	</body>
</html>